<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统主页</title>
    <script src="/res/jquery-3.6.0.min.js"></script>
</head>
<body>
home<br/>
<%--<c:forEach
        items="<object>"
        begin="<int>"
        end="<int>"
        step="<int>"
        var="<string>"
        varStatus="<string>">--%>
<a href="/user/add">新增</a><br/>
<button onclick="search()">搜索</button><input type="text" id="userName" value="${userName!=null?userName:''}" placeholder="请输入用户名">
<table border="1">
    <tr>
        <td>
            <button id="delAll">删除</button>
        </td>
        <td>ID</td>
        <td>用户名</td>
        <td>密码</td>
        <td>操作</td>
    </tr>
    <c:forEach items="${users}" var="user">

    <tr>
        <td>
            <input type="checkbox" value="${user.id}" id="cids_${user.id}">
        </td>
        <td>${user.id}</td>
        <td>${user.userName}</td>
        <td>${user.password}</td>
        <td>
            <a href="/user/add?id=${user.id}">编辑</a>|
            <a href="javascript:void(0);" onclick="delById(${user.id})">删除</a>
        </td>
    </tr>

    </c:forEach>

    <tr>
        <td>
            <input type="checkbox" id="selectAll">
        </td>
        <td colspan="4">
            <a href="/home">首页</a>

            <a href="/home?current=${current-1}">上一页</a>
            <a href="/home?current=${current+1}">下一页</a>
            <a href="/home?current=${pages }">尾页</a>
        </td>
    </tr>

</table>

</body>
<script>
    function delById(id){
        var msg = "您真的确定要删除吗？\n\n请确认！";
        if (confirm(msg)==true){
            window.location.href='/user/delById?id='+id
        }else{
        }
    }

    function search(){
        var userName = $("#userName").val()
        window.location.href='/home?userName='+userName
    }

    jQuery(function(){
        $("#selectAll").click(function(){
            //让所有以cids_开头的id 它的checked值和selectAll被点击后的值一致
            $("[id^=cids_]").prop('checked',$(this).prop('checked'))
        })

        $("#delAll").click(function(){
            var ids = [];
            $("[id^=cids_]:checked").each(function(i,e){
                ids.push(e.value)
            })

            $.ajax({
                type:'post',
                url:'/user/delAll',
                data:JSON.stringify(ids),
                dataType:'json',
                contentType:'application/json',
                success:function(ret){
                    if(ret){
                        window.location.href='/home'
                    }
                }
            })


        })

    })

</script>
</html>
